import { ReactComponent as FileIcon } from '@/assets/svg/file-management.svg';
import { ReactComponent as GraphIcon } from '@/assets/svg/graph.svg';
import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
import { useTranslate } from '@/hooks/common-hooks';
import { useFetchAppConf } from '@/hooks/logic-hooks';
import { useNavigateWithFromState } from '@/hooks/route-hook';
import { MessageOutlined, SearchOutlined } from '@ant-design/icons';
import { Menu, Space, Layout, theme } from 'antd';
import { useCallback, useMemo } from 'react';
import { useLocation } from 'umi';
import Toolbar from '../right-toolbar';

import styles from './index.less';

const { Header } = Layout;

const RagHeader = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const navigate = useNavigateWithFromState();
  const { pathname } = useLocation();
  const { t } = useTranslate('header');
  const appConf = useFetchAppConf();

  const tagsData = useMemo(
    () => [
      { path: '/chat', name: t('chat'), icon: MessageOutlined },
      { path: '/knowledge', name: t('knowledgeBase'), icon: KnowledgeBaseIcon },
      // { path: '/search', name: t('search'), icon: SearchOutlined },
      // { path: '/flow', name: t('flow'), icon: GraphIcon },
      // { path: '/file', name: t('fileManager'), icon: FileIcon },
    ],
    [t],
  );

  const currentPath = useMemo(() => {
    return (
      tagsData.find((x) => pathname.startsWith(x.path))?.name || 'knowledge'
    );
  }, [pathname, tagsData]);

  const handleChange = (path: any) => {
    navigate(path);
  };

  const handleLogoClick = useCallback(() => {
    navigate('/chat');
  }, [navigate]);

  return (
    <Header
      style={{
        padding: '0 16px',
        background: colorBgContainer,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        height: '100%',
        position: 'relative',
        overflow: 'hidden'
      }}
    >
      <Space size={12} onClick={handleLogoClick} className={styles.logoWrapper}>
        <img src="/nexfly-logo.webp" alt="nexfly" style={{ borderRadius: '20%' }} className={styles.appIcon} />
      </Space>

      <Menu
        mode="vertical"
        selectedKeys={[currentPath]}
        style={{ marginTop: '30px', border: 'none' }}
      >
        {tagsData.map((item) => (
          <Menu.Item
            key={item.name}
            onClick={() => handleChange(item.path)}
            className={styles.menuItem}
          >
            <div className={styles.iconTextWrapper}>
              <item.icon className={styles.nexflyMenuIcon}
              />
              <span className={styles.menuText}>{item.name}</span>
            </div>
          </Menu.Item>
        ))}
      </Menu>

      <div style={{ marginTop: 'auto', marginBottom: '3px' }}>
        <Toolbar />
      </div>
    </Header>
  );
};

export default RagHeader;
